<template>
  <div 
    class="fixed inset-0 z-50 flex items-center justify-center p-4"
    v-if="visible"
    @click="handleCancel"
  >
    <!-- 背景遮罩 -->
    <div class="absolute inset-0 bg-black bg-opacity-50 transition-opacity duration-300"></div>
    
    <!-- 对话框内容 -->
    <div 
      class="relative w-full max-w-md bg-white rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 scale-100"
      @click.stop
    >
      <!-- 对话框头部 -->
      <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
        <h3 class="text-lg font-semibold text-gray-800">
          {{ title || '确认操作' }}
        </h3>
        <button 
          class="text-gray-500 hover:text-gray-700 transition-colors"
          @click="handleCancel"
        >
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <!-- 对话框内容区 -->
      <div class="p-6">
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0 mt-1">
            <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center">
              <i class="fa fa-exclamation-triangle text-yellow-500"></i>
            </div>
          </div>
          <div class="flex-1">
            <p class="text-gray-700">
              {{ message || '您确定要执行此操作吗？此操作可能无法撤销。' }}
            </p>
            <p v-if="subMessage" class="mt-2 text-sm text-gray-500">
              {{ subMessage }}
            </p>
          </div>
        </div>
      </div>
      
      <!-- 对话框底部 -->
      <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-end gap-3">
        <button 
          class="btn btn-secondary"
          @click="handleCancel"
          :disabled="loading"
        >
          取消
        </button>
        <button 
          class="btn btn-danger"
          @click="handleConfirm"
          :disabled="loading"
        >
          <i v-if="loading" class="fa fa-spinner fa-spin mr-1"></i>
          {{ confirmText || '确认' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  // 是否显示对话框
  visible: {
    type: Boolean,
    default: false
  },
  // 对话框标题
  title: {
    type: String,
    default: ''
  },
  // 主要消息内容
  message: {
    type: String,
    default: ''
  },
  // 次要消息内容
  subMessage: {
    type: String,
    default: ''
  },
  // 确认按钮文本
  confirmText: {
    type: String,
    default: ''
  },
  // 是否加载中
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['confirm', 'cancel'])

// 处理确认操作
const handleConfirm = () => {
  emit('confirm')
}

// 处理取消操作
const handleCancel = () => {
  emit('cancel')
}
</script>
